<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ msg }}
			<!--	使用ref给标签设置引用		-->
			<h1 ref="my_h1">h1标签</h1>
			<h2 ref="my_h2">h2标签</h2>
			<button type="button" @click="handleClick">点击</button>
			<hr>
			<!--	ref还可以给子组件进行引用命名		-->
			<my-com ref="myCom"></my-com>
		</div>
		<script>
			var vue = new Vue({
				el:'#app',
				data:{
					msg:'王子元有一个聪明的小脑瓜！'
				},
				methods:{
					handleClick(){
						console.log(this.$refs.my_h1)
						let h1 = this.$refs.my_h1
						let h2 = this.$refs.my_h1
						console.log("h1:" + h1.innerText)
						console.log("h2:" + h1.innerHTML)

						// innerText与innerHtml区别
						// innerText获取/修改dom元素的 文本内容
						// innerHTML获取/修改dom元素的 html内容
						h1.innerText = "<p>p标签</p>"
						h2.innerHTML = "<p>p标签</p>"

						// 获取子组件 - 登陆组件的msg
						console.log("父组件获取子组件的信息：" + this.$refs.myCom.msg)
						// 出发子组件的方法
						this.$refs.myCom.loginclick()

					}
				},
				components:{//私有组件
					myCom:{
						template:`
							<div>
								<h1>登陆组件</h1>
								<button @click="loginclick">Login</button>
							</div>
						`,
						data(){
							return {
								msg:"这里是登陆组件"
							}
						},
						methods: {
							loginclick(){
								alert('登陆成功！')
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
